<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">库存查询</a>
</h3>

<div id="app">
    <template>
        <el-form>
        <el-select v-model="Warnings"
                   multiple
                   filterable
                   allow-create
                   default-first-option
                   @change="sonChange(Warnings)"
                   placeholder="请选择仓库名称编号">
            <el-option
                    v-for="item in tWarning"
                    :key="item.Warnings"
                    :label="item.menuId"
                    :value="item.menuId">
            </el-option>
        </el-select>
            <el-select v-model="TWarning"
                       multiple
                       filterable
                       allow-create
                       default-first-option
                       @change="senChange(TWarning)"
                       placeholder="请选择产品名称">
                <el-option
                        v-for="item in tWarning"
                        :key="item.TWarning"
                        :label="item.product"
                        :value="item.product">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="save()">查询</el-button>

            <template v-model="count">
                <span style="margin-left: 50px; color: #ff0509" >当前仓库预警信息有 {{count}} 条 </span>
            </template>

        </el-form>
    </template>
    <!--   表单区域-->
    <template>
        <el-table style="width: 100%"
                  :data="tWarning"
                  ref="siteTable"
                  align="center">
            <el-table-column label="仓库名称" align="center" width="230">
                <template slot-scope="scope">
                    <div v-for="(item,index) in tWarning[scope.$index].tmenus" :key="index">
                        {{scope.row.tmenus[index].wareName}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="产品名称编号" align="center" width="230">
                <template slot-scope="scope">
                    <div v-for="(item,index) in tWarning[scope.$index].tproducts" :key="index">
                        {{scope.row.tproducts[index].pnumber}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" width="230">
                <template slot-scope="scope">
                    <div v-for="(item,index) in tWarning[scope.$index].tproducts" :key="index">
                        {{scope.row.tproducts[index].pname}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="现有数量" align="center" width="230">
                <template slot-scope="scope">
                    {{scope.row.productNum}}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="230">
                <span style=" color: #ff0509">库存不足 </span>
            </el-table-column>
            <el-table-column label="预警值" align="center" width="230">
                <template slot-scope="scope">
                    <div v-for="(item,index) in tWarning[scope.$index].twarnings" :key="index">
                        {{scope.row.twarnings[index].warningNum}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-setting" @click="handleEdit(scope.$index, scope.row)">设置预警值</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-dialog title="" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
            <el-form :model="tWarnings">
                <el-form-item label="设置预警值">
                    <el-input v-model="tWarnings.warningNum" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrgan()">确 定</el-button>
            </div>
        </el-dialog>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
        </el-dialog>
    </template>
      </div>
  </template>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 当前页数
                currentPage: 1,
                // 数据总数
                count : 0,
                // 每页的数据
                page_size : [6,3],
                // 当前每页的数据
                pageSize : 6,
                back: true,
                //定义的查询数组
                tWarning:[],
                tproducts:[],
                Warning:{},
                TWarning:{},
                Warnings:{},
                dialogFormVisible:false,
                //仓库
                tmenus:[],
                menus:[],
                //产品
                tproduct:[],
                tWarnings:[],

                menuId:null,
                product:null,
                productNum:400,

            }
        },
        methods: {
            // 加载库存信息
            loadOrgans(){
                axios.get("/warning/"+this.currentPage +"/"+ this.pageSize+"?menuId="+this.menuId+"&&product="+this.product+"&&productNum="+this.productNum)
                    .then(res => {
                        this.tWarning = res.data.data;
                        this.count = res.data.count;
                        console.log(this.tWarning);
                    })
            },
            // 加载所有仓库
            ledOrgans(){
                axios.get("/warnings")
                    .then(res => {
                        this.tmenus = res.data;
                    })

            },
            // 加载所有产品
            leledOrgans(){
                axios.get("/product")
                    .then(res => {
                        this.tproduct = res.data;
                    })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadOrgans();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadOrgans();
            },
            //搜索框赋值
            sonChange(val){
                if (val == ""){
                    this.menuId = null;
                }else {
                    this.menuId = val;

                }
            },
            //加载库存预警表
            handleEdit(index,row){
                this.dialogFormVisible =true;
                axios.get("/twarningse/"+row.menuId)
                    .then(res => {
                        this.tWarnings = res.data;
                        console.log(this.tWarnings)
                    })

            },
            closeDialog(){

            },
            //搜索框赋值
            senChange(val){
                console.log(val);
                if (val == ""){
                    this.product = null;
                }else {
                    this.product = val;
                }
            },
            //更新
            saveOrgan(){
                axios.put("/twarnings",this.tWarnings)
                    .then(res => {
                        if (res.data == "ok") {
                            this.loadOrgans();
                            console.log(this.tWarnings)
                        }
                    });
                this.dialogFormVisible = false;
            },
            //查询执行事件
            save(){
                this.loadOrgans();
            },
        },

        mounted(){
            this.loadOrgans();
            this.ledOrgans();
            this.leledOrgans();
        }
    });
</script>
</html>